<template>
	<view>
		<view v-for="(item,key) in talklist" :key="key">
			<view class="say" v-if='item.sendText'>
				<div class="mobile-page" style="font-size: initial;">
					<div class="user-group">
						<div class="user-msg">
							<span class="user-reply">{{item.sendText}}</span>
							<i class="triangle-user"></i>
						</div>
						<image style="border-radius: 50px;" class="user-img" src="../../static/user1.jpg" mode="">
						</image>
					</div>
					<div class="admin-group" v-if='item.sendText'>
						<image class="admin-img" src="../../static/jqr.png" mode=""></image>
						<div class="admin-msg">
							<i class="triangle-admin"></i>
							<span class="admin-reply">{{item.resContent}}</span>
						</div>
					</div>
				</div>
			</view>
		</view>

		<view style="width: 100%;background-color: #000000;">
			<scroll-view :style="{height: height+'px'}" scroll-y>

			</scroll-view>
		</view>
		<view class="footer" ref="footer" id="footer">
			<view class="content-wrap">
				<textarea class="content" v-model="text" maxlength="-1" auto-height />
			</view>
			<view class="btn-wrap">
				<button class="btn" @click="handleSend">
					<text style="text-align: center;">发送</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import server from '@/util/http.js'
	export default {
		data() {
			return {
				text: '',
				sendText: '',
				height: 0,
				resContent: '',
				talklist: [],
			}
		},
		methods: {
			handleSend() {
				console.log(this.text);
				this.sendText = this.text;
				this.text = "";
				server({
					url: 'http://101.43.227.220:3004/robot/communication?text=' + this.sendText,
					method: 'post',
					success: res => {
						var item = {
							sendText: this.sendText,
							resContent: res.data.responseMessage
						}
						this.talklist.push(item)
						console.log(res.data.responseMessage);
						this.resContent = res.data.responseMessage;
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.footer {
		width: 100%;
		background-color: #E9EDF4;
		display: flex;
		position: fixed;
		bottom: 0;
	}

	.footer .content-wrap {
		width: 78%;
		margin-left: 2%;
	}

	.footer .content {
		width: 100%;
		box-sizing: border-box;
		margin: 14rpx 0;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 16rpx;
		caret-color: #01B4FE;
	}

	.footer .btn-wrap {
		width: 18%;
		margin-right: 2%;
	}

	.footer .btn {
		width: 15%;
		height: 65rpx;
		font-size: small;
		margin-left: 2%;
		background-color: #01B4FE;
		color: #FFFFFF;
		position: fixed;
		bottom: 14rpx;
		border: 0;
		outline: none;
	}

	.footer .btn-wrap .disabled {
		background-color: #aae8f5;
	}

	/deep/ .uni-textarea-wrapper {
		max-height: 180rpx;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	p,
	ul,
	ol,
	li,
	form,
	button,
	input,
	textarea,
	th,
	td {
		margin: 0;
		padding: 0
	}

	body,
	button,
	input,
	select,
	textarea {
		font: 12px/1.5 Microsoft YaHei UI Light, tahoma, arial, "\5b8b\4f53";
		*line-height: 1.5;
		-ms-overflow-style: scrollbar
	}

	h1,
	h2,
	h3,
	h4 {
		font-size: 100%
	}

	ul,
	ol {
		list-style: none
	}

	a {
		text-decoration: none
	}

	a:hover {
		text-decoration: underline
	}

	img {
		border: 0
	}

	button,
	input,
	select,
	textarea {
		font-size: 100%
	}

	table {
		border-collapse: collapse;
		border-spacing: 0
	}

	/*rem*/
	html {
		font-size: 62.5%;
	}

	body {
		font: 16px/1.5 "microsoft yahei", 'tahoma';
	}

	body .mobile-page {
		font-size: 1.6rem;
	}

	/*浮动*/
	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.clearfix:after {
		content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	body {
		background-color: #F5F5F5;
	}

	.mobile-page {
		max-width: 600px;
	}

	.mobile-page .admin-img,
	.mobile-page .user-img {
		width: 45px;
		height: 45px;
	}

	i.triangle-admin,
	i.triangle-user {
		width: 0;
		height: 0;
		position: absolute;
		top: 10px;
		display: inline-block;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}

	.mobile-page i.triangle-admin {
		left: 4px;
		border-right: 12px solid #fff;
	}

	.mobile-page i.triangle-user {
		right: 4px;
		border-left: 12px solid #9EEA6A;
	}

	.mobile-page .admin-group,
	.mobile-page .user-group {
		padding: 6px;
		display: flex;
		display: -webkit-flex;
	}

	.mobile-page .admin-group {
		justify-content: flex-start;
		-webkit-justify-content: flex-start;
	}

	.mobile-page .user-group {
		justify-content: flex-end;
		-webkit-justify-content: flex-end;
	}

	.mobile-page .admin-reply,
	.mobile-page .user-reply {
		display: inline-block;
		padding: 8px;
		border-radius: 4px;
		background-color: #fff;
		margin: 0 15px 12px;
	}

	.mobile-page .admin-reply {
		box-shadow: 0px 0px 2px #ddd;
	}

	.mobile-page .user-reply {
		text-align: left;
		background-color: #9EEA6A;
		box-shadow: 0px 0px 2px #bbb;
	}

	.mobile-page .user-msg,
	.mobile-page .admin-msg {
		width: 75%;
		position: relative;
	}

	.mobile-page .user-msg {
		text-align: right;
	}
</style>
</style>
